@import "ui-variables";

.tooltip {
  white-space: nowrap;

  .keystroke {
    color: @text-color-subtle;
    padding-left: 2/@rem;
  }

  &.in {
    opacity: 1;
  }

  .tooltip-inner {
    background-color: @tip-background-color;
    padding: (@component-padding / 3) @component-padding;
    color: @tip-text-color;
    white-space: nowrap;
    max-width: none;
    letter-spacing: 0.01rem;
    border-radius: @component-border-radius-small;
  }

  &.top .tooltip-arrow {
    border-top-color: @tip-arrow-color;
  }
  &.top-left .tooltip-arrow {
    border-top-color: @tip-arrow-color;
  }
  &.top-right .tooltip-arrow {
    border-top-color: @tip-arrow-color;
  }
  &.right .tooltip-arrow {
    border-right-color: @tip-arrow-color;
  }
  &.left .tooltip-arrow {
    border-left-color: @tip-arrow-color;
  }
  &.bottom .tooltip-arrow {
    border-bottom-color: @tip-arrow-color;
  }
  &.bottom-left .tooltip-arrow {
    border-bottom-color: @tip-arrow-color;
  }
  &.bottom-right .tooltip-arrow {
    border-bottom-color: @tip-arrow-color;
  }
}
